<template>
  <div class="cardBox">
    <!-- 大屏公司卡片 -->
    <div class="bigcard dis500 flex column" v-for="i in cardList">
      <div class="">
        <div class="flex">
          <div><van-icon :name="i.icon" class="c9 mgr8" size="42" /></div>
          <div class="">
            <div class="lmName titleName">{{ i.comName }}</div>
            <div class="fs14 c9">
              <span>{{ i.state }}</span>
              <span>|</span>
              <span>{{ i.num }}</span>
              <span>|</span>
              <span>{{ i.type }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-for="j in i.job" class="mgt20">
        <div class="flex jcsb">
          <div class="flex aic">
            <span class="titleName mgr8 lmName">{{ j.name }}</span>
            <span><van-icon name="comment" class="c9" /></span>
          </div>
          <div class="corg">{{ j.money }}</div>
        </div>
        <div class="fs14 c9 ndis500">
          <span class="mgr8 lmName">{{ j.comName }}</span>
          <span>{{ j.city }}</span>
        </div>
        <div class="tagGroup">
          <div class="mainTag " v-for="k in j.tag">{{ k }}</div>
        </div>
      </div>
      <div class="flex jcc mgt10">
        <div class="mbtn">查看更多职位</div>
      </div>
    </div>
    <!-- 小屏公司卡片 -->
    <div class="wcard ndis500" v-for="j in cardList" >
      <div>
        <div class="flex">
        <div><van-icon :name="j.icon" class="c9 mgr8" size="42" /></div>
        <div class="van-ellipsis">
          <div class="lmName titleName">{{ j.comName }}</div>
          <div class="fs12 c9 flex">
            <div>热招</div>
            <div class="mgr8 mgl8">|</div>
            <div class="lmName mnamew">{{ j.job[0].name }}</div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../../public.css";
@import "../../ui/vant-ui/ui.css";
.bigcard{
  width: 290px;
  height: 330px;
  padding: 16px 20px ;
  margin: 10px;
  position: relative;
  border-radius: 8px;
  background-color: #fff;
}
.wcard {
  width: 160px ;
  height: 30px;
  padding: 16px 10px;
  margin: 10px;
  border-radius: 8px;
  position: relative;
  background-color: #fff;
}

.titleName {
  max-width: 80px;
  color: #000;
  font-size: 14px;
}
.mnamew {
  width: 40px;
}
.titleName:hover {
  color: var(--primary-color);
}
.lmName {
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tagGroup {
  margin: 10px 0;
  white-space: normal;
  padding-right: 0;
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  word-break: break-all;
  max-width: none;
}
.mainTag {
  display: inline;
  padding: 5px;
  border-radius: 5px;
  margin-right: 10px;
  background-color: #eeeeee65;
  color: #666;
  letter-spacing: 0;
  font-size: 14px;
}
.corg {
  color: orange;
}
.cardBox{
  width: 100%;
  display: flex;
  overflow-x: scroll;
}
@media (min-width: 500px) {
  .titleName {
    max-width: 120px !important;
    font-size: 18px !important;
  }
  .cardBox{
  display: flex;
  flex-wrap: wrap;
}
}
</style>
<script>
module.exports = {
  data() {
    return {
      inderwidth: window.innerWidth||document.documentElement.clientWidth,
    };
  },
  props: {
    cardList: {
      type: Array,
      default: function () {
        return [
          {
            icon: "vip-card-o",
            comName: "心有网络啊飒飒撒发顺丰",
            state: "未融资",
            num: "500-800人",
            type: "游戏",
            job: [
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
            ],
          },
          {
            icon: "vip-card-o",
            comName: "心有网络啊飒飒撒发顺丰",
            state: "未融资",
            num: "500-800人",
            type: "游戏",
            job: [
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
            ],
          },
          {
            icon: "vip-card-o",
            comName: "心有网络啊飒飒撒发顺丰",
            state: "未融资",
            num: "500-800人",
            type: "游戏",
            job: [
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
            ],
          },
          {
            icon: "vip-card-o",
            comName: "心有网络啊飒飒撒发顺丰",
            state: "未融资",
            num: "500-800人",
            type: "游戏",
            job: [
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
            ],
          },
          {
            icon: "vip-card-o",
            comName: "心有网络啊飒飒撒发顺丰",
            state: "未融资",
            num: "500-800人",
            type: "游戏",
            job: [
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
              {
                name: "菜狗工程师",
                money: "10-20k",
                tag: ["阳江", "经验不限", "学历不限"],
              },
            ],
          },
        ];
      },
    },
  },
  methods: {},
};
</script>
